<template>
  <div style="display: flex;flex-direction: row;position: fixed;bottom: 0;width: 100%;background: white">
    <div style="display: flex;flex-direction: column;flex: 3;border-width: 0px 0px 1px 0px; border-style: solid;
    border-color: #f1f1f1;" v-on:click="onNumberClick">
      <div class="number-line">
        <span class="number" data-num='1'>1</span>
        <span class="number" data-num='2'>2</span>
        <span class="number" data-num='3'>3</span>
      </div>
      <div class="number-line">
        <span class="number" data-num='4'>4</span>
        <span class="number" data-num='5'>5</span>
        <span class="number" data-num='6'>6</span>
      </div>
      <div class="number-line">
        <span class="number" data-num='7'>7</span>
        <span class="number" data-num='8'>8</span>
        <span class="number" data-num='9'>9</span>
      </div>
      <div class="number-line">
        <span class="number" data-num='0'>0</span>
        <span class="number" data-num='00'>00</span>
        <span class="number" data-num='0000'>0000</span>
      </div>
    </div>
    <div style="display:flex;flex-direction:column;flex: 1">
      <span style="flex: 1.0;border-right-width: 1.5px;border-right-color:#f1f1f1" class="number"
            v-on:click="onDeleteClick">
        <img :src="IconDelete" style="display: block;margin: auto;width: 40px"/>
      </span>

      <span style="flex: 1;font-weight: bold;border-right-width: 1.5px;border-right-color:#f1f1f1" class="number"
            v-on:click="onDotClick">
         ·
      </span>
      <span
        style="flex: 2.54;padding-top: 20px;background: #F39360;border-right-width: 1.5px;border-right-color:#f1f1f1;color: white"
        v-on:click="onConfirmClick" class="number">
        完<br>成
      </span>
    </div>
  </div>
</template>

<script>
  import IconDelete from '@/assets/icon/icon_del.png'

  export default {
    name: 'money-input-keyboard',
    props: ['initMoney'],
    data () {
      return {
        IconDelete: IconDelete,
        money: ''
      }
    },
    created () {
      this.money = this.initMoney
    },
    methods: {
      onNumberClick: function (e) {
        let num = e.target.dataset.num
        let S = this.money
        // 如果有小数点且小数点后的位数小于2
        if (S.indexOf('.') > -1) {
          if (S.substring(S.indexOf('.') + 1).length < 2) {
            this.money = S + num
            if (this.money.substring(this.money.indexOf('.') + 1).length > 2) {
              this.money = Number(this.money).toFixed(2)
            }
          } else {
            return
          }
        } else {
          // 如果第一位是0，只能输入小数点
          if ((num === 0 || num === '00' || num === '0000') && S.length === 0) {
            this.money = '0.'
          } else {
            if (S.length && Number(S.charAt(0)) === 0) {
              return
            }

            this.money = S + num
            if (this.money === undefined) {
              this.money = ' '
            }
          }
        }
        this.$emit('onMoneyChanged', this.money)
      },
      onDeleteClick: function () {
        let S = this.money
        if (!S.length) {
          return
        }
        this.money = S.substring(0, S.length - 1)
        this.$emit('onMoneyChanged', this.money)
      },
      onDotClick: function () {
        if (this.money.indexOf('.') > -1) {
          return
        }
        if (!this.money.length) {
          this.money = '0.'
        } else {
          this.money = this.money + '.'
        }
        this.$emit('onMoneyChanged', this.money)
      },
      onConfirmClick: function () {
        let S = this.money
//        未输入
        if (!S.length) {
          this.$vux.alert.show({
            title: '温馨提示',
            content: '您目前未输入!',
            onShow () {
            },
            onHide () {
            }
          })
          return false
        }
//        将 8. 这种转换成 8.00
        if (S.indexOf('.') > -1 && S.indexOf('.') === (S.length - 1)) {
          S = Number(S.substring(0, S.length - 1)).toFixed(2)
        }
//        保留两位
        S = Number(S).toFixed(2)
        this.$emit('onFinished', S)
      }
    }
  }
</script>

<style scoped>
  .number {
    padding: 10px;
    font-size: 25px;
    color: black;
    flex: 1;
    text-align: center;
    border-style: solid;
    border-color: #f1f1f1;
    border-width: 1px 0px 0px 1px;
  }

  .number-line {
    display: flex;
    flex-direction: row;
  }
</style>
